/**
 * pieces 定义划分圆的数量
 * radius 圆的半径
 * fft 储存初始化FFT对象的变量
 * mapMouseX 映射的划分线条数
 * mapMouseY 映射的圆的半径大小
 * toggleBtn 播放暂停按钮
 * audio 寄存当前播放的音乐文件
 * uploadBtn 上传新的音乐文件按钮
 * uploadedAudio 加载新的音乐文件
 * uploadAnim 加载动画区域的DOM元素
 *  */
var pieces, radius, fft, mapMouseX, mapMouseY, toggleBtn, audio, uploadBtn, uploadedAudio, uploadAnim;
var colorPalette = ["#000", "rgba(22, 59, 72, 0.5)", "#00a6e0", "#002a38"];
// 是否展示动画等待效果
var uploadLoading = false;
// 加载音乐
function preload() {
	audio = loadSound("audio/yexin.mp3");
}

// 上传音乐文件
function uploaded(file) {
	// 先出现加载动画
	uploadLoading = true;
	// 加载音乐文件完成，隐藏加载动画
	uploadedAudio = loadSound(file.data, uploadedAudioPlay);
}


function uploadedAudioPlay(audioFile) {
	// 隐藏加载动画
	uploadLoading = false;
	// 正在播放的音乐暂停
	if (audio.isPlaying()) {
		audio.pause();
	}
	// 重置当前音乐
	audio = audioFile;
	// 循环播放此音乐
	audio.loop();
}

// 初始化数据
function setup() {
	// 获取加载区域DOM
	uploadAnim = select('#uploading-animation');
	// 创建一个canvas画板
	createCanvas(windowWidth, windowHeight);
	// 创建一个按钮，为了控制播放或者暂停
	toggleBtn = createButton("播放 / 暂停");
	// 创建一个文件上传表单，以上传新的音乐
	uploadBtn = createFileInput(uploaded);
	// 添加类名以控制上传音乐文件操作
	uploadBtn.addClass("upload-btn");
	// 添加类名以控制播放暂停操作
	toggleBtn.addClass("toggle-btn");
	// 给播放暂停按钮绑定鼠标按下事件，执行播放/暂停操作
	toggleBtn.mousePressed(toggleAudio);

	// 初始化FFT对象
	fft = new p5.FFT();
	// 音乐循环播放
	audio.loop();

}


// 开始绘图
function draw() {

	// 添加一个css加载动画效果
	if (uploadLoading) {
		uploadAnim.addClass('is-visible');
	} else {
		uploadAnim.removeClass('is-visible');
	}
	// 定义画板背景颜色为黑色
	background(colorPalette[0]);
	// 去除填充效果
	noFill();
	// 在音频播放过程中运行分析
	fft.analyze();

	// 获取不同频率范围的音量
	var bass = fft.getEnergy("bass");     // 低音区音量
	var treble = fft.getEnergy("treble");    // 高音区音量
	var mid = fft.getEnergy("mid");     // 中音区音量

	// 用你想要的数字映射每个音量的范围，音量的范围只能是0~255
	var mapMid = map(mid, 0, 255, -radius, radius);
	var scaleMid = map(mid, 0, 255, 1, 1.5);

	var mapTreble = map(treble, 0, 255, -radius, radius);
	var scaleTreble = map(treble, 0, 255, 1, 1.5);

	var mapbass = map(bass, 0, 255, -100, 800);
	var scalebass = map(bass, 0, 255, 0, 0.8);
	// 把mouseX的0~width范围线性映射为4~10范围
	mapMouseX = map(mouseX, 0, width, 4, 20);
	mapMouseY = map(mouseY, 0, height, windowHeight / 10, windowHeight / 4);

	// 根据鼠标所在的位置来映射的划分线条数
	pieces = mapMouseX;
	// 根据鼠标的纵坐标位置来映射圆的半径大小
	radius = mapMouseY;
	// 坐标转移到画布中心
	translate(windowWidth / 2, windowHeight / 2);
	// 指定边框的宽度为1
	strokeWeight(1);

	for (i = 0; i < pieces; i += 0.5) {
		// 旋转的角度，TWO_PI为2Π，即360°
		rotate(TWO_PI / pieces);


		/*----------  BASS 低音动画  ----------*/
		push();
		strokeWeight(5);
		stroke(colorPalette[1]);
		scale(scalebass);      // 缩小0.8
		rotate(frameCount * -0.5);    // frameCount记录了从开始运行到目前一共刷新了几帧
		line(mapbass, radius / 2, radius, radius);
		line(-mapbass, -radius / 2, radius, radius);        // 上面那根线的反方向线
		pop();



		/*----------  MID 中音动画  ----------*/
		push();
		strokeWeight(0.5);
		stroke(colorPalette[2]);
		scale(scaleMid);
		line(mapMid, radius / 2, radius, radius);
		line(-mapMid, -radius / 2, radius, radius);
		pop();


		/*----------  TREMBLE 高音动画  ----------*/
		push();
		stroke(colorPalette[3]);
		scale(scaleTreble);
		line(mapTreble, radius / 2, radius, radius);
		line(-mapTreble, -radius / 2, radius, radius);
		pop();

	}

}


function toggleAudio() {
	if (audio.isPlaying()) {
		audio.pause();
	} else {
		audio.play();
	}
}

// 实现网页全屏自适应
function windowResized() {
	// 重新加载canvas的区域
	resizeCanvas(windowWidth, windowHeight);
}